import * as echarts from 'echarts'
const Bar4Option = ({ xAxisData, dataList, color }) => {
  let options = {
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      top: 20,
      left: 20,
      right: 10,
      bottom: 45,
    },
    xAxis: [
      {
        type: 'category',
        data: xAxisData,
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.12)',
          },
        },
        axisPointer: {
          type: 'shadow',
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: function (value, index) {
              return color[index][0]
            },
            fontSize: 10,
          },
        },
        splitArea: {
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        offset: 5,
        axisTick: {
          show: false,
        },
        splitNumber: 3,
        axisLine: {
          lineStyle: {
            color: '#D0D7E8',
          },
        },
        axisLabel: {
          show: false,
          formatter: '{value}',
          color: '#8D93A7',
        },
      },
    ],
    series: [
      {
        type: 'bar',
        barWidth: 5,
        barGap: '11',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#FF6060' },
            { offset: 1, color: '#FFE3A1' },
          ]),
          borderRadius: 5,
        },
        data: dataList.map((item, index) => {
          return {
            value: item,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: color[index][0],
                },
                {
                  offset: 1,
                  color: color[index][1],
                },
              ]),
            },
          }
        }),
        label: {
          show: true,
          position: 'top',
          color: '#8D93A7',
        },
      },
    ],
  }
  return options
}

export { Bar4Option }
